import React from "react";
import { Card, Col, DatePicker, Row, Tabs } from 'antd';
import { FormattedMessage, formatMessage } from 'umi';
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
import type moment from 'moment';
import styles from './index.less';
import Xbar from "@/components/Xbar";
import { DaysRange } from '@alitajs/antd-plus';

const { TabPane } = Tabs;

const rankingListData: { title: string; total: number }[] = [];
for (let i = 0; i < 7; i += 1) {
  rankingListData.push({
    title: formatMessage({ id: 'dashboardanalysis.analysis.test' }, { no: i }),
    total: 323234,
  });
}

type RangePickerValue = RangePickerProps<moment.Moment>['value'];

const SalesCard = ({
                     loading,
                   }: {
  rangePickerValue: RangePickerValue;
  isActive: (key: 'today' | 'week' | 'month' | 'year') => string;
  loading: boolean;
  handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
  selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;
}) => (
  <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
    <div className={styles.salesCard}>
      <Tabs
        tabBarExtraContent={
          <div className={styles.salesExtraWrap}>

            <DaysRange
              onChange={(data) => {
                console.log(data);
              }}
            />
          </div>
        }
        size="large"
        tabBarStyle={{ marginBottom: 24 }}
      >
        <TabPane
          tab={<FormattedMessage id="dashboardanalysis.analysis.sales" defaultMessage="xbar控制图异常去趋势分析" />}
          key="sales"
        >
          <Row>
            <Col xl={24} lg={24} md={24} sm={24} xs={24}>
              <div className={styles.salesBar}>
                <Xbar />
              </div>
            </Col>

          </Row>
        </TabPane>
      </Tabs>
    </div>
  </Card>
);

export default SalesCard;
